<template>
  <div>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
    <div class="echart" id="brand" :style="myChartStyle"></div>
    <div style="margin-left: 380px">
      <el-date-picker type="date" v-model="startTime" value-format="YYYY-MM-DD" placeholder="起始日期"
                      style="width: 200px;margin-right: 20px"></el-date-picker>
      <el-date-picker type="date" v-model="endTime" value-format="YYYY-MM-DD" placeholder="结束日期"
                      style="width: 200px;margin-right: 20px"></el-date-picker>
      <el-button type="primary" v-on:click="info()" style="margin-right: 30px">查询</el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      myChart: {},
      pieData: [],
      pieName: [],
      myChartBrand: {},
      pieDataBrand: [],
      pieNameBrand: [],
      myChartStyle: {float: "left", width: "600px", height: "400px"} //图表样式
    };
  },
  mounted() {
    this.initDate(); //数据初始化
    this.initDateBrand();
  },
  methods: {
    initDate() {
      let param = {
        startTime: this.startTime,
        endTime: this.endTime
      }
      axios.post('/api/saleStatistics/selectType', param).then(response => {
        let temp = response.data
        for (let i = 0; i < temp.length; i++) {
          this.pieData.push({
            value: temp[i].sumPrice,
            name: this.typeTrans(temp[i].type)
          })
        }
        for (let i = 0; i < this.pieData.length; i++) {
          // this.xData[i] = i;
          // this.yData =this.xData[i]*this.xData[i];
          this.pieName[i] = this.pieData[i].name;
        }
        this.initEcharts()
      })
    },
    initEcharts() {
      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieName,
          right: "10%",
          top: "20%",
          orient: "vertical"
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "销售类别统计",
          top: "15%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
            },
            radius: "30%", //饼图半径
            data: this.pieData
          }
        ]
      };
      console.log(this.seriesData);
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    initDateBrand() {
      let param = {
        startTime: this.startTime,
        endTime: this.endTime
      }
      axios.post('/api/saleStatistics/selectBrand', param).then(response => {
        let temp = response.data
        for (let i = 0; i < temp.length; i++) {
          this.pieDataBrand.push({
            value: temp[i].sumPrice,
            name: temp[i].name
          })
        }
        for (let i = 0; i < this.pieDataBrand.length; i++) {
          // this.xData[i] = i;
          // this.yData =this.xData[i]*this.xData[i];
          this.pieNameBrand[i] = this.pieDataBrand[i].name;
        }
        this.initEchartsBrand()
      })
    },
    initEchartsBrand() {
      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieNameBrand,
          right: "0%",
          top: "20%",
          orient: "vertical"
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "销售产品统计",
          top: "15%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
            },
            radius: "30%", //饼图半径
            data: this.pieDataBrand
          }
        ]
      };
      console.log(this.seriesData);
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("brand"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },


    typeTrans(type) {
      if (type == 1) {
        return '电脑产品'
      } else if (type == 2) {
        return '安防产品'
      } else if (type == 3) {
        return '打印扫描设备'
      } else if (type == 4) {
        return '办公耗材'
      }
    },

    info() {
      this.pieData = []
      this.pieDataBrand = []
      this.initDate(); //数据初始化
      this.initDateBrand();
    },
  }
};
</script>

<style scoped>

</style>